<template>
  <div class="user-footer">
    <el-descriptions class="margin-top" title="个人基本信息" :column="2" border>
      <template #extra>
        <el-button
          v-if="props.userInfo.userId === userStore.userMessage.userId"
          :type="editing ? 'success' : 'primary'"
          :icon="editing ? Check : Edit"
          circle
          @click="editing ? saveInfo() : toggleEdit()"
        />
      </template>
      <el-descriptions-item>
        <template #label>
          <el-space :size="size" :spacer="spacer" style="min-width: 118px">
            <el-icon><User /></el-icon>
            昵称
          </el-space>
        </template>
        <div v-if="editing" style="flex-grow: 1">
          <el-input
            v-model="tempUserData.nickname"
            maxlength="16"
            show-word-limit
            placeholder="请输入昵称"
          />
        </div>
        <div
          v-else
          style="flex-grow: 1; margin-left: 11px; font-size: 14px; line-height: 30px; width: 200px"
        >
          {{ props.userInfo.nickname }}
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <el-space :size="size" :spacer="spacer">
            <el-icon><Coin /></el-icon>
            积分
          </el-space>
        </template>
        <div style="flex-grow: 1; margin-left: 11px; font-size: 14px; line-height: 30px">
          {{ props.userInfo.score }}
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <el-space :size="size" :spacer="spacer">
            <el-icon><Calendar /></el-icon>
            年龄
          </el-space>
        </template>
        <div v-if="editing" style="flex-grow: 1">
          <el-select v-model="tempUserData.age" class="selectAge" placeholder="请选择年龄">
            <el-option
              v-for="item in age"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div v-else style="flex-grow: 1; margin-left: 11px; font-size: 14px; line-height: 30px">
          {{ props.userInfo.age }}
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <el-space :size="size" :spacer="spacer">
            <el-icon><Connection /></el-icon>
            性别
          </el-space>
        </template>
        <div v-if="editing" style="flex-grow: 1">
          <el-radio-group v-model="tempUserData.sex">
            <el-radio v-for="option in sex" :key="option.value" :label="option.value">
              {{ option.label }}
            </el-radio>
          </el-radio-group>
        </div>
        <div v-else style="flex-grow: 1; margin-left: 11px; font-size: 14px; line-height: 30px">
          {{ props.userInfo.sex }}
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <el-space :size="size" :spacer="spacer">
            <el-icon><Message /></el-icon>
            电子邮箱
          </el-space>
        </template>
        <div v-if="editing" style="flex-grow: 1">
          <el-input
            v-model="tempUserData.userEmail"
            maxlength="30"
            show-word-limit
            placeholder="请输入电子邮箱"
          />
        </div>
        <div v-else style="flex-grow: 1; margin-left: 11px; font-size: 14px; line-height: 30px">
          {{ props.userInfo.userEmail }}
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <el-space :size="size" :spacer="spacer">
            <el-icon><Iphone /></el-icon>
            手机号码
          </el-space>
        </template>
        <div v-if="editing" style="flex-grow: 1">
          <el-input
            v-model="tempUserData.phoneNumber"
            maxlength="11"
            show-word-limit
            placeholder="请输入手机号码"
          />
        </div>
        <div
          v-else
          style="flex-grow: 1; margin-left: 11px; font-size: 14px; line-height: 30px; width: 220px"
        >
          {{ props.userInfo.phoneNumber }}
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <el-space :size="size" :spacer="spacer">
            <el-icon><TrophyBase /></el-icon>
            擅长领域
          </el-space>
        </template>
        <div v-if="editing" style="flex-grow: 1; min-height: 37px; padding-top: 5px">
          <el-select
            v-model="tempSkillArray"
            multiple
            class="skill-select"
            placeholder="请选择或输入需求所需的技能，如您不清楚应选择哪些技能，请留空，由竞标方为您提供所需的技能信息"
          >
            <ul v-for="(item, index) in needSkills" :key="index">
              <li class="content_title">{{ item?.name }}</li>
              <ul class="content">
                <el-option
                  v-for="(item1, index1) in item?.content"
                  :key="index1"
                  :value="item1"
                  :label="item1"
                >
                </el-option>
              </ul>
            </ul>
          </el-select>
        </div>
        <div
          v-else
          style="
            flex-grow: 1;
            font-size: 14px;
            line-height: 42px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
          "
        >
          <span class="tags-container" v-for="skill in skillArray" :key="skill">
            <span class="tag">{{ skill }}</span>
          </span>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script lang="ts" setup>
import { h, ref, reactive, computed } from 'vue'
import useUserStore from '@/store/user/user'
import { Check, Edit } from '@element-plus/icons-vue'
import { ElDivider } from 'element-plus'
import { needSkills } from '@/global/constants'

const props = defineProps(['userInfo'])
const size = ref(10)
const spacer = h(ElDivider, { direction: 'vertical' })
const emit = defineEmits(['updateMyInfo'])
//age 1-120
const age: { value: number; label: number }[] = []
for (let i = 1; i <= 120; i++) {
  age.push({
    value: i,
    label: i
  })
}
const userStore = useUserStore()
// 创建一个响应式对象作为表单数据的临时存储
const tempUserData = reactive({
  nickname: userStore.userMessage.nickname,
  age: userStore.userMessage.age,
  sex: userStore.userMessage.sex,
  userEmail: userStore.userMessage.userEmail,
  phoneNumber: userStore.userMessage.phoneNumber,
  skill: userStore.userMessage.skill
})
const skillArray = computed(() => {
  if (props.userInfo.userId === userStore.userMessage.userId) {
    return userStore.userMessage.skill ? userStore.userMessage.skill.split(',') : []
  } else {
    return props.userInfo.skill ? props.userInfo.skill.split(',') : []
  }
})
const tempSkillArray = ref()
// 控制是否处于编辑状态
const editing = ref(false)

// 切换编辑状态
const toggleEdit = () => {
  editing.value = !editing.value
  if (editing.value) {
    tempSkillArray.value = skillArray.value
  }
}
// 保存信息到用户状态
const saveInfo = () => {
  tempUserData.skill = tempSkillArray.value.filter((item: any) => item.trim() !== '').join(',') //数组转字符串
  Object.assign(userStore.userMessage, tempUserData)
  editing.value = false
  const ruleForm = reactive({
    userId: userStore.userMessage.userId,
    userBust: userStore.userMessage.userBust,
    userVita: userStore.userMessage.userVita,
    nickname: userStore.userMessage.nickname,
    username: userStore.userMessage.username,
    password: userStore.userMessage.password,
    userEmail: userStore.userMessage.userEmail,
    phoneNumber: userStore.userMessage.phoneNumber,
    skill: userStore.userMessage.skill,
    score: userStore.userMessage.score,
    age: userStore.userMessage.age,
    sex: userStore.userMessage.sex
  })
  userStore.updateUserInformation(ruleForm)
  emit(
    'updateMyInfo',
    userStore.userMessage.nickname,
    userStore.userMessage.age,
    userStore.userMessage.sex,
    userStore.userMessage.userEmail,
    userStore.userMessage.phoneNumber,
    userStore.userMessage.skill
  )
}

const sex = [
  {
    value: '保密',
    label: '保密'
  },
  {
    value: '男',
    label: '男'
  },
  {
    value: '女',
    label: '女'
  }
]
</script>

<style lang="less" scoped>
.user-footer {
  width: 100%;
  height: 100%;
  padding: 30px;
}
.user-footer > * {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}

.el-descriptions-item {
  display: flex;
  align-items: center;
  .el-icon {
    margin-right: 10px;
  }
}
.gender {
  display: flex;
  label {
    margin-right: 20px;
  }
}

.selectAge {
  width: 100%;
}

/* 修改技能要求选择框的长度 */
.skill-select {
  width: 760px;
}

/* 只针对擅长领域下拉菜单的小标签样式 */
.content /deep/ li.el-select-dropdown__item {
  width: 130px;
  height: 35px;
  border-radius: 100px;
  color: #bfcdd9;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 34px;
  font-size: 13px;
  float: left;
  margin: 0 5px 5px 15px;
}

/* 修改下拉菜单的宽度 */
.is-multiple ul {
  width: 600px;
}

/* （技能要求）清除浮动 */
div.el-scrollbar ul.content {
  overflow: hidden;
  padding-left: 22px;
}

/* 选择技能需求时每个标题的样式 */
div.el-scrollbar li.content_title {
  font-size: 14px;
  color: #000;
  border-left: 4px solid #2093e1;
  margin: 20px 0 20px 16px;
  padding-left: 12px;
  height: 20px;
  line-height: 20px;
  border-bottom: none;
}

/*隐藏技能要求选择时后面的勾  */
.el-select-dropdown__item.selected::after {
  content: '';
  display: none !important;
}
.tags-container {
  line-height: 30px;
}
.tag {
  padding: 3px 20px;
  font-size: 12px;
  color: #909399;
  margin: 2px;
  background-color: #f4f4f5;
  border-radius: 5px;
}
</style>
